<script lang="ts" setup>
import { NButton, NCard } from "naive-ui";
import { useDesignStore } from "@/stores/module/design";
import type { DriveStep } from "driver.js";
import { useDriver } from "@/hooks/useDriver";

const { driver } = useDriver();

const { getPrefixCls } = useDesignStore();
const prefixCls = getPrefixCls("header-");

const handleStart = () => {
  const driverSteps: DriveStep[] = [
    {
      popover: {
        title: "引导一下",
        description: "欢迎进入引导👋",
      },
    },
    {
      element: `.${prefixCls}logo`,
      popover: {
        title: "logo",
        description: "app logo",
      },
    },
  ];

  driver({ steps: driverSteps }).drive();
};
</script>

<template>
  <NCard class="test-test">
    <NButton @click="handleStart">开始</NButton>
  </NCard>
</template>

<style lang="less" scoped></style>
